<template>
	<view class="container">
		<view class="hz-container">
			<view class="today-container">
				<text class="today-zc-font" @click="getPayCountByDay">今日支出</text>
				<text>{{nowSum}}</text>
			</view>
			<view class="hz-month">
				<view class="hz-zc" @click="getBillExpenditurebyMonth">
					<text class="hz-zc-font">本月支出</text>
					<text>{{ExpenditurebyMonth}}</text>
				</view>
				<view class="hz-sr" @click="getBillInComebyMonth">
					<text class="hz-sr-font">本月收入</text>
					<text>{{BillInComebyMonth}}</text>
				</view>
			</view>
		</view>
		<!--账单列表-->
		<view class="bill-container" v-for="(bill, i) in billList" :key="i">
			<view class="bill-top">
				<text>{{bill.createTime}}</text>
				<text>{{bill.mark}} {{bill.type_desc}}</text>
			</view>
			<view class="bill-bottom">
				<text class="zichi" v-if="isInCome(bill)">支出</text>
				<text class="income" v-else>收入</text>
				<text>￥{{bill.pay}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				billList: [],
				nowSum: 0,
				BillInComebyMonth: 0,
				ExpenditurebyMonth: 0,
				isShow: true,
				pageIndex: 1, //第N页
				pageSize: 2, //每页条数
				total: 0, //总条数
				//是否正在请求数据
				isloading: false
			};
		},
		onLoad() {
			this.getBillList()
			//今日支出
			this.getPayCountByDay()
			//本月收入
			this.getBillInComebyMonth()
			//本月支出
			this.getBillExpenditurebyMonth()
		},
		onShow() {
			this.getBillList()
			//今日支出
			this.getPayCountByDay()
			//本月收入
			this.getBillInComebyMonth()
			//本月支出
			this.getBillExpenditurebyMonth()
		},
		methods: {
			//获取用户列表
			getBillList() {
				uniCloud.callFunction({
					name: "BillList",
					data: {}
				}).then(res => {
					this.billList = res.result.data
				})
			},
			isInCome(bill) {
				if (bill.type == 1) {
					return true
				} else {
					return false
				}
			}, //今日支出
			async getPayCountByDay() {
				uniCloud.callFunction({
					name: "PayCountByDay"
				}).then(res=>{
					console.log('今日',res)
				});
			},
			//本月支出
			async getBillExpenditurebyMonth() {
				
			},
			//本月收入
			async getBillInComebyMonth() {
				
			},
		}
	}
</script>


<style lang="scss">
	.container {
		margin: 10px;

		.hz-container {
			border-radius: 10px;
			padding: 10px;
			border: 1px solid gold;
			background-color: gold;

			.today-container {
				display: flex;
				flex-direction: column;

				.today-zc-font {
					color: gray;
					font-size: 12px;
				}

				padding-bottom: 10px;
			}

			.hz-month {
				display: flex;
				// flex-direction: column;
				justify-content: space-between;
				align-items: center;

				.hz-zc,
				.hz-sr {
					display: flex;
					flex-direction: column;
					padding-right: 20%;

					.hz-zc-font,
					.hz-sr-font {
						color: gray;
						font-size: 12px;
					}
				}
			}
		}

		.bill-container {
			margin-top: 10px;
			background-color: white;
			border-radius: 10px;
			border: 1px solid white;
			padding: 10px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.bill-top {
				display: flex;
				flex-direction: column;
			}

			.bill-bottom {
				.zichi {
					color: green;
				}

				.income {
					color: red;
				}
			}
		}
	}
</style>